<!DOCTYPE html>
<html>
<head>
    <title>Binding to local data</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.dataviz.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.dataviz.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    <div id="example" class="k-content">
    <div class="chart-wrapper">
        <h3 class="title">Australia - Hourly Compensation Costs in Manufacturing /USD/</h3>
        <table id="stats" class="stats">
            <thead>
                <tr>
                    <th class="year">Year</th>
                    <th class="hourly">Compensation costs</th>
                    <th class="change">Annual change %</th>
                    <th class="direct">Direct Pay</th>
                    <th class="benefits">Benefit components</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <script id="template" type="text/x-kendo-template">
        <tr class="rows">
            <td class="year">${year}</td>
            <td class="hourly"><span class="bar-hourly" style="width: 130px;"></span></td>
            <td class="change"><span class="bar-change" style="width: 130px;"></span></td>
            <td class="direct"><span class="bar-direct" style="width: 130px;"></span></td>
            <td class="benefits"><span class="bar-benefits" style="width: 130px;"></span></td>
        </tr>
    </script>

    <script>
        function createSparklines() {
            // Create a row template using the above definition
            var template = kendo.template($("#template").html());

            $("#stats tbody").empty();
            // "data" is declared at the end of the page
            for (var i = 0; i < data.length; i++) {
                var rowData = data[i];

                var row = $("#stats tbody")
                    .append(template(rowData))
                    .find("tr:last");

                $(".bar-hourly", row).kendoSparkline({
                    type: "bar",
                    data: [rowData.hourly],
                    valueAxis: {
                        max: 50
                    }
                });

                $(".bar-change", row).kendoSparkline({
                    type: "bar",
                    series: [{
                        data: [rowData.change],
                        negativeColor: "#808080"
                    }],
                    valueAxis: {
                        min: -40,
                        max: 40
                    },
                    categoryAxis: {
                        visible: true,
                        majorTicks: {
                            visible: false
                        }
                    }
                });

                $(".bar-direct", row).kendoSparkline({
                    type: "bar",
                    data: [rowData.direct],
                    valueAxis: {
                        max: 50
                    }
                });

                $(".bar-benefits", row).kendoSparkline({
                    type: "bar",
                    dataSource: {
                        data: rowData.benefits,
                        group: {
                            field: "type",
                            dir: "asc"
                        }
                    },
                    series: [{
                        field: "value"
                    }],
                    valueAxis: {
                        max: 10
                    }
                });
            }
        }

        $(document).ready(createSparklines);
        $("#example").bind("kendo:skinChange", createSparklines);
        var data = [{
            year: "2011",
            hourly: 46.29,
            change: 16.69,
            direct: 32.09,
            benefits: [{
                type: "Social",
                value: 9.25
            }, {
                type: "Direct",
                value: 4.41
            }]
        },{
            year: "2010",
            hourly: 39.67,
            change: 18.7,
            direct: 29.73,
            benefits: [{
                type: "Social",
                value: 7.93
            }, {
                type: "Direct",
                value: 3.78
            }]
        },{
            year: "2009",
            hourly: 33.42,
            change: -6.93,
            direct: 31.69,
            benefits: [{
                type: "Social",
                value: 6.78
            }, {
                type: "Direct",
                value: 3.17
            }]
        },{
            year: "2008",
            hourly: 35.91,
            change: 7.61,
            direct: 31.87,
            benefits: [{
                type: "Social",
                value: 7.39
            }, {
                type: "Direct",
                value: 3.39
            }]
        },{
            year: "2007",
            hourly: 33.37,
            change: 14.4,
            direct: 28.41,
            benefits: [{
                type: "Social",
                value: 6.86
            }, {
                type: "Direct",
                value: 3.15
            }]
        },{
            year: "2006",
            hourly: 29.17,
            change: 2.17,
            direct: 25.10,
            benefits: [{
                type: "Social",
                value: 6.07
            }, {
                type: "Direct",
                value: 2.75
            }]
        },{
            year: "2005",
            hourly: 28.55,
            change: 6.73,
            direct: 24.20,
            benefits: [{
                type: "Social",
                value: 6.08
            }, {
                type: "Direct",
                value: 2.67
            }]
        },{
            year: "2004",
            hourly: 26.75,
            change: 18.1,
            direct: 23.34,
            benefits: [{
                type: "Social",
                value: 5.74
            }, {
                type: "Direct",
                value: 2.50
            }]
        },{
            year: "2003",
            hourly: 22.65,
            change: 30.02,
            direct: 21.16,
            benefits: [{
                type: "Social",
                value: 4.79
            }, {
                type: "Direct",
                value: 2.12
            }]
        },{
            year: "2002",
            hourly: 17.42,
            change: 15.98,
            direct: 17.37,
            benefits: [{
                type: "Social",
                value: 3.61
            }, {
                type: "Direct",
                value: 1.64
            }]
        },{
            year: "2001",
            hourly: 15.02,
            change: -8.69,
            direct: 16.06,
            benefits: [{
                type: "Social",
                value: 2.92
            }, {
                type: "Direct",
                value: 1.44
            }]
        },{
            year: "2000",
            hourly: 16.45,
            change: -9.32,
            direct: 16.06,
            benefits: [{
                type: "Social",
                value: 3.08
            }, {
                type: "Direct",
                value: 1.59
            }]
        },{
            year: "1999",
            hourly: 18.14,
            change: 5.77,
            direct: 18.13,
            benefits: [{
                type: "Social",
                value: 3.42
            }, {
                type: "Direct",
                value: 1.75
            }]
        },{
            year: "1998",
            hourly: 17.15,
            change: -9.40,
            direct: 18.37,
            benefits: [{
                type: "Social",
                value: 3.17
            }, {
                type: "Direct",
                value: 1.66
            }]
        },{
            year: "1997",
            hourly: 18.93,
            change: -1.25,
            direct: 18.17,
            benefits: [{
                type: "Social",
                value: 3.46
            }, {
                type: "Direct",
                value: 1.84
            }]
        }];
    </script>

    <style scoped>
        .chart-wrapper {
            padding: 10px 0;
            height: 450px;
        }
        .stats {
            border-collapse: collapse;
            line-height: 2em;
            width: 100%;
            border: 0;
            border-top: 1px solid rgba(128,128,128,.3);
            border-bottom: 1px solid rgba(128,128,128,.3);
        }
        .stats td, .stats th {
            padding: 0 10px;
        }
        .stats th {
            border-bottom: 1px solid rgba(128,128,128,.3);
            text-align: left;
        }
        .stats tr.rows {
            -moz-transition: background .6s;
            -webkit-transition: background .6s;
            transition: background .6s;
        }
        .stats tr.rows:hover {
            -moz-transition: background-color .3s;
            -webkit-transition: background-color .3s;
            transition: background-color .3s;
            background-color: rgba(128,128,128,.2);
        }
        .year {
            width: 40px;
        }
        .stats th.change, .change {
            text-align: center;
            background-color: rgba(128,128,128,.1);
        }
        .title {
            margin: 5px 0 15px;
            text-align: center;
        }
    </style>
</div>

</body>
</html>
